import { onMounted, ref, watch, onActivated, onDeactivated } from 'vue';
import { useWindowSize } from '@vueuse/core';

export default function useTable(tableRef, bottom) {
	// console.log(tableRef.$el);
	const bottomOptions = {
		noPagination: 32,
		withPagination: 32 + 52,
	};

	let lock = false;
	const tableHeight = ref();
	const { height } = useWindowSize();

	onMounted(() => {
		calcTableHeight();
	});

	onActivated(() => {
		// console.log("onActivated");
		lock = false;
		calcTableHeight();
	});

	onDeactivated(() => {
		// console.log("onDeactivated");
		lock = true;
	});

	watch(height, () => {
		calcTableHeight();
	});

	function calcTableHeight() {
		if (lock) return;
		console.log('hshshsh',tableRef);
		const { top } = tableRef.value.$el.getBoundingClientRect();
    
		let currentBottom = 0;
		if (typeof bottom === 'string') {
			currentBottom = bottomOptions[bottom] || 0;
		} else {
			currentBottom = bottom;
		} 
		if ((height.value - top) < 200) {
			tableHeight.value = 500;
			return;
		}

		tableHeight.value = height.value - top - currentBottom;
		// console.log(tableHeight)
	}
	return {
		tableHeight,
		calcTableHeight,
	};
}
